<template>
    <div class="temp-collapse">
        <el-input
                v-model="item.queryParam"
                style="width: 100%"
                placeholder="请输入你的问题"
                :prefix-icon="Search"
                @input="filterByQuestion"
        />
        <div v-if="item.collapseData && item.collapseData.length > 0">
            <el-collapse v-model="item.activeName" class="parent-collapse" accordion @change="(val) => handleParentChange(item, val)">
                <el-collapse-item v-for="(dirItem,index) in item.collapseData" :title="dirItem.directory" :name="index">
                    <el-collapse v-model="dirItem.activeName" class="child-collapse" accordion @change="(val) => handleChange(item, val)">
                        <el-collapse-item v-for="(childItem,childIndex) in dirItem.children" :title="childItem.question" :name="index + '-' + childIndex">
                            <div class="faq-answer" v-loading="item.loading">
                                {{item.answer}}
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-empty :image-size="200" v-else></el-empty>
    </div>
</template>

<script setup>
    import {defineProps, defineEmits, getCurrentInstance, toRaw, toRefs, ref} from 'vue'
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus';
    const props = defineProps({
        item: {
            type: Object,
        },
    })
    let emit = defineEmits(['resetIndexData']);

    const {item} = toRefs(props);

    const {proxy} = getCurrentInstance()
    const nlAxios = proxy.$http;

    const filterByQuestion =() => {
        let itemData = toRaw(item.value);
        if (itemData.queryParam) {
            let matchedFAQ = itemData.allData.map(pItem => ({
                ...pItem,
                children: pItem.children.filter(child =>
                    child.question.includes(itemData.queryParam)
                )
            })).filter(pItem => pItem.children.length > 0);
            itemData.collapseData = matchedFAQ
            itemData.activeName = 0
        } else {
            itemData.collapseData = itemData.allData
            itemData.activeName = -1
        }
        emit('resetIndexData', itemData);
    }

    const handleChange = (item, val) => {
        if (val) {
            let question = ''
            A:for (const [index, dirItem] of item.collapseData.entries()) {
                for (const [childIndex, childItem] of dirItem.children.entries()) {
                    if (val == (index + '-' + childIndex)) {
                        question = childItem.question
                        break A
                    }
                }
            }
            console.log('问题:',question)
            item.loading = true
            item.answer = ''
            let url = 'cm/QA'
            let param = {
                content: question,
                subs: null,
            }
            nlAxios.post(url, param).then(async (res) => {
                if (res.data.status == '0') {
                    let answer = res.data.data.content
                    item.answer = answer
                } else {
                    ElMessage({
                        message: res.data.data,
                        type: 'warning',
                        plain: true,
                    })
                }
                item.loading = false
                let itemData = toRaw(item);
                emit('resetIndexData', itemData);
            }).catch((e) => {
                ElMessage({
                    message: '当前网络响应有些缓慢，请稍等片刻后再次尝试。',
                    type: 'error',
                    plain: true,
                })
                item.loading = false
                let itemData = toRaw(item);
                emit('resetIndexData', itemData);
            })
        } else {
            let itemData = toRaw(item);
            emit('resetIndexData', itemData);
        }
    }

    const handleParentChange =(item, val) => {
        let itemData = toRaw(item);
        emit('resetIndexData', itemData);
    }
</script>

<style scoped lang="less">
    ::v-deep .el-input {
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #B8B8B8;
        .el-input__icon {
            color: #757575;
        }
    }
    ::v-deep .el-collapse {
        border-bottom: none;
        border-top: none;
        margin-top: 5px;
        .el-collapse-item__wrap {
            border-bottom: none;
        }
        .el-collapse-item__content {
            padding-bottom: 0;
        }
        .el-collapse-item__arrow {
            color: #0079FD;
        }
        .circular {
            width: 25px;
            height: 25px;
            margin-top: 5px;
        }
    }
    .parent-collapse {
        ::v-deep .el-collapse-item__header {
            font-size: 14px;
            color: #3F61A4;
        }
        .child-collapse {
            ::v-deep .el-collapse-item__header {
                font-size: 14px;
                color: #434343;
                border-bottom: none;
                line-height: 20px;
                text-align: left;
            }
            .faq-answer {
                background: rgba(118,141,223,0.09);
                border-radius: 4px 4px 4px 4px;
                padding: 9px;
                font-size: 12px;
                color: #696969;
                line-height: 22px;
            }
        }
    }
</style>